{% extends 'base_hx.html' %}
{% block body %}

<blockquote class="layui-elem-quote layui-text">
  主要收集每日放逐魔王数据。
</blockquote>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  <legend>请认真填写</legend>
</fieldset>

<div class="layui-main site-inline">
<div class="site-content">
<form class="layui-form" action="" style="margin-left: -50px">
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">日期</label>
      <div class="layui-input-inline">
        <input type="text" name="date" id="date" lay-verify="date" value="{{ default_date }}" autocomplete="off" class="layui-input">
      </div>
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">次序</label>
    <div class="layui-input-block">
      <select id="order" name="order" lay-filter="order">
     {% for item in order_options %}
         <option value="{{ item }}">{{ item }}</option>
     {% endfor %}
    </select>
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">金</label>
    <div class="layui-input-block">
      <input type="radio" name="jin" value="真身" title="真身" checked="">
      <input type="radio" name="jin" value="分身" title="分身">
      <input type="radio" name="jin" value="假身" title="假身">
      <input type="radio" name="jin" value="空图" title="空图">
    </div>
  </div>
<div class="layui-form-item">
    <label class="layui-form-label">木</label>
    <div class="layui-input-block">
      <input type="radio" name="mu" value="真身" title="真身" checked="">
      <input type="radio" name="mu" value="分身" title="分身">
      <input type="radio" name="mu" value="假身" title="假身">
      <input type="radio" name="mu" value="空图" title="空图">
    </div>
  </div>
<div class="layui-form-item">
    <label class="layui-form-label">水</label>
    <div class="layui-input-block">
      <input type="radio" name="shui" value="真身" title="真身" checked="">
      <input type="radio" name="shui" value="分身" title="分身">
      <input type="radio" name="shui" value="假身" title="假身">
      <input type="radio" name="shui" value="空图" title="空图">
    </div>
  </div>
<div class="layui-form-item">
    <label class="layui-form-label">火</label>
    <div class="layui-input-block">
      <input type="radio" name="huo" value="真身" title="真身" checked="">
      <input type="radio" name="huo" value="分身" title="分身">
      <input type="radio" name="huo" value="假身" title="假身">
      <input type="radio" name="huo" value="空图" title="空图">
    </div>
  </div>
<div class="layui-form-item">
    <label class="layui-form-label">土</label>
    <div class="layui-input-block">
      <input type="radio" name="tu" value="真身" title="真身" checked="">
      <input type="radio" name="tu" value="分身" title="分身">
      <input type="radio" name="tu" value="假身" title="假身">
      <input type="radio" name="tu" value="空图" title="空图">
    </div>
  </div>
  <div class="layui-form-item" style="margin-left: 40px">
    <div class="layui-input-block">
      <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
</div>
</div>
{% endblock %}

{% block other_js %}
<script>
layui.use(['fly', 'form', 'layedit', 'laydate'], function(){
  var $ = layui.$
  ,form = layui.form
  ,layer = layui.layer
  ,layedit = layui.layedit
  ,laydate = layui.laydate
  ,fly = layui.fly;

  //日期
  laydate.render({
    elem: '#date'
  });
  laydate.render({
    elem: '#date1'
  });

  //创建一个编辑器
  var editIndex = layedit.build('LAY_demo_editor');

  //自定义验证规则
  form.verify({
    title: function(value){
      if(value.length < 5){
        return '标题至少得5个字符啊';
      }
    }
    ,pass: [
      /^[\S]{6,12}$/
      ,'密码必须6到12位，且不能出现空格'
    ]
    ,content: function(value){
      layedit.sync(editIndex);
    }
  });

  //监听指定开关
  form.on('switch(switchTest)', function(data){
    layer.msg('开关checked：'+ (this.checked ? 'true' : 'false'), {
      offset: '6px'
    });
    layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
  });

  //监听提交
  form.on('submit(demo1)', function(data){
      layer.confirm('确认提交？', function() {
          fly.json('/api/data', data.field, function (res) {
              if (res.status === 0) {
                  layer.alert("提交成功");
              }
          }, {}, function () {
          });
      });
    return false;
  });

  //表单赋值
  layui.$('#LAY-component-form-setval').on('click', function(){
    form.val('example', {
      "username": "贤心" // "name": "value"
      ,"password": "123456"
      ,"interest": 1
      ,"like[write]": true //复选框选中状态
      ,"close": true //开关状态
      ,"sex": "女"
      ,"desc": "我爱 layui"
    });
  });

  //表单取值
  layui.$('#LAY-component-form-getval').on('click', function(){
    var data = form.val('example');
    alert(JSON.stringify(data));
  });

});
</script>
{% endblock %}